<template>
    <div class="menu">
        <el-menu :default-active="active"
                 :default-openeds="menuData.defOpenIndex"
                 class="custom-menu"
                 ref="menu"
                 @select="_onSelect"
        >
            <component
                    :class="(item.children&&item.children.length>0)?'menu-item menu-border':'menu-item menu-self-border'"
                    v-for="(item) in menuData.menusTree" :key="item.id"
                    :index="item.path||'_'+item.id"
                    :is="(item.children&&item.children.length>0)?'el-submenu':'el-menu-item'">
                <template v-if="!item.children||item.children.length==0">
                    <i class="item-icon" :class="item.path"></i>
                    <span slot="title">{{item.menuName}}</span>
                </template>
                <template v-if="item.children&&item.children.length>0">
                    <template slot="title">
                        <i class="item-icon" :class="item.path"></i>
                        <span>{{item.menuName}}</span>
                    </template>
                    <el-menu-item v-for="v in item.children" :key="v.id" :index="v.path||'_'+v.id"
                                  class="menu-children-border">
                        <i class="item-icon" :class="v.path"></i>
                        <span slot="title">{{v.menuName}}</span>
                    </el-menu-item>
                </template>
            </component>
        </el-menu>
    </div>

</template>

<script>


import Vue from 'vue';


export default {
  menuName: 'CuEMenu',
  data() {
    return {
      openIndex: [],
      active: '',
      prevPath: null
    }
  },
  watch: {
    activeMenu: {
      handler(val, oldVal) {
        this.prevPath = val[0];
        if (val&&val.length>0) {
          this.$emit('onActive', val[0], val[1], oldVal);
          this.active = val[0].path;
        }
      }
    }
  },
  computed: {
    defaultActive() {
      return this.$store.getters.getDefaultActive;
    },
    activeMenu() {
      return this.$store.getters.getActiveMenu
    },
    menuData() {
      return this.$store.getters.getMenuData;
    },
    loginInfo() {
      return this.$store.getters.getLoginInfo
    }
  },
  methods: {
    _onSelect(index, paths) {

      if (this.prevPath.path==='filemanage') {
        this.$confirm(
          '操作尚未保存，是否确认退出？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        ).then(() => {
          this.$store.commit('setActiveMenu', [index]);
          localStorage.setItem('menu_active', index);
        }).catch(() => {
          this.active = null;
          setTimeout(() => {
            this.active = this.prevPath.path;
            this.$store.commit('setActiveMenu', [this.prevPath.path]);
            localStorage.setItem('menu_active', this.prevPath.path);
          }, 200)
        });
      } else {
        this.$store.commit('setActiveMenu', [index]);
        localStorage.setItem('menu_active', index);
      }

      this.$store.state.home.dialogVisible = false;
      this.$store.state.home.params = null;
    }
  },
  mounted() {
    this.$nextTick(function() {
      //   if (localStorage.getItem('menu_active') !== 'null' && localStorage.getItem('menu_active') !== 'undefined' && localStorage.getItem('menu_active')) {
      //     this.active = localStorage.getItem('menu_active');
      //   } else {
      //     // TODO 应该登录后菜单存储到store中
      //     // this.active = this.$store.state.authority.menuData[0].path;
      //     this.active = this.menus[0].children[0].path;
      //   }

      if (this.loginInfo && 'admin' === this.loginInfo.name && this.loginInfo.id !== -1) {
        this.active = 'page'
      } else {
        this.active = this.menuData.menusTree[0].children[0].path;
      }
      this.$store.commit('setActiveMenu', [this.active]);

      console.info(this.menuData.defOpenIndex)
      // this._onSelect(this.active);
    })
  },
  created() {
    // this.menus = this.$store.state.authority.menuData;

    // console.info(this.menus)
    // this.menus = Menu;

    // if (this.menuData.menusTree.length === 0) {
    //   //   this.menus = Menu.menus[0].children;
    //   this.defOpenIndex();
    // } else {
    //   this.defOpenIndex();
    // }
    // this.menuList = this._formatTree(this.menus);

    Vue.prototype.$CuMenu = this;
    window.$CuMenu = this;
  },
}
</script>

<style scoped lang="less">
    @isActive:#1a2634;
    @TextColor:#FFFFFF;
    .menu /deep/ * {
        box-sizing: border-box;
    }

    .menu {
        height: 100%;
        background: transparent;
        box-sizing: border-box;
    }

    .menu-inner {
        overflow: hidden;
        width: 100%;
        background: #20272d;
    }


    .menu-button {
        transition: .5s;
        float: left;
        display: inline-block;
        position: relative;
        width: 45px;
        height: 45px;
        cursor: pointer;
        border-right: 1px solid #797979;
    }

    .menu-button .menu-icon {
        border: 1px solid transparent;
        position: absolute;
        top: calc(50% - 10px);
        left: calc(50% - 10px);
        width: 20px;
        height: 20px;
    }

    .item-icon {
        width: 20px;
        height: 20px;
        display: inline-block;
        margin-left: -4px;
        margin-right: 4px;
        background-size: 100%;
        background-repeat: no-repeat;

    }


    .custom-menu {
        background-color: transparent;
        border-width: 0;
        overflow: hidden;
        .el-menu-item{
            color: @TextColor;
        }
    }

    .custom-menu /deep/ .menu-self-border {
        border-bottom: 0;
        font-weight: bold;
    }
    .custom-menu /deep/ .menu-border{
        border-bottom: 1px solid #2f3f52;
    }
    .custom-menu /deep/ .menu-border .el-submenu__title {
        color: @TextColor;
        border-bottom: 0;
        font-weight: bold;
    }

    .custom-menu /deep/ .menu-children-border {
    }

    .custom-menu /deep/ .menu-border:last-child .el-submenu__title {
        color: @TextColor;
        border-width: 0;

    }

    .custom-menu /deep/ .el-submenu .el-menu-item {
        height: 45px;
        line-height: 45px;
        min-width: auto;
    }

    .custom-menu /deep/ .el-menu {
        background-color: transparent;
    }

    .custom-menu /deep/ .el-menu-item.is-active {
        color: @TextColor;
        background:  @isActive;
    }

    .custom-menu /deep/ .el-menu-item.is-active:before {
        content: "";
        display: block;
        width: 4px;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        background: #389fc0;
        border-radius: 1px;
    }

    .custom-menu /deep/ .el-menu-item:focus, .el-menu-item:hover {
        color: @TextColor;
        background-color: @isActive;
    }

    .custom-menu /deep/ .el-submenu .el-submenu__title:focus, .custom-menu /deep/ .el-submenu .el-submenu__title:hover {
        color: @TextColor;
        background-color: @isActive;
    }

</style>
<style>

</style>
